<template>
	<view> 
		<u-sticky bgColor="#fff" h5-nav-height="48" style="display: flex;justify-content: space-evenly;">
			<u-tabs :list="list1" :scrollable="true" :current="currentIndex"  @click="clickTab" lineWidth="50"></u-tabs>
		</u-sticky> 
		<view class="container">
			<u-list @scrolltolower="scrolltolower" >
				<u-list-item v-for="(item, index) in listData" :key="index">
					<view class="item">
						<view class="top">
							<view>订单号：{{ item.no }}</view>
							<view class="status">{{ item.statusText }}</view>
						</view>
						<view class="center" v-for="(itm,ind) in item.items" :key="ind">
							<view class="goods_img">
								<image :src="'https://images.weserv.nl/?url=' + itm.product.image[0]" mode=""></image>
								<!-- <image :src="itm.product.image[0]" mode=""></image> -->
							</view>
							<view class="goods_info">
								<view>
									{{itm.product.title}}
								</view>
								<view style="font-size: 22rpx;">
									规格：{{itm.product_sku.title}}
								</view>
								<view class="price_num">
									<view class="price">￥{{itm.product_sku.price}}</view>
									<view class="num">x{{itm.amount}}</view>
								</view>
							</view>
						</view>
						<view class="down">
							<view></view>
							<!-- 共{{item.items}}件商品 -->
							<view>实付款：￥{{item.total_amount}}</view>
						</view>
						<view class="bottom_btn" v-if="item.closed == true || item.paid_at != null">
							<u-button class="info_btn" type="primary" plain text="查看详情" shape="circle" size="small" @click="goToInfo(item.id)"></u-button>
						</view>
						<view class="bottom_btn" v-if="item.closed == false && item.paid_at == null">
							<u-button class="info_btn" type="primary" plain text="支付" shape="circle" size="small" @click="wxpay(item.id)"></u-button>
						</view>
						<!-- <view class="bottom_btn2" >
							<view class="closeorder">
								剩余时间
							</view>
							<view class="close_order_btn">关闭订单</view>
							<view class="pay_order_btn">支付</view>
						</view> -->
					</view>
				</u-list-item>
				<u-loadmore
					:status="loadmoreStatus"	
					loadingText="努力加载中"
					loadmoreText="轻轻上拉"
					nomoreText="沒有更多了"
				/>
			</u-list>
			
		</view>
	</view>
</template>

<script>
import { orderList , wechatpay } from '@/api/order.js'
export default {
	data() {
		return {
			currentIndex:0,
			list1: [
				{
					name: '全部'
				},
				{
					name: '待付款'
				},
				{
					name: '待发货'
				},
				{
					name: '待收货'
				},
				{
					name: '已收货'
				},
				{
					name: '退款'
				}
			],
			listData: [],
			status:'',
			loadmoreStatus: 'loadmore',
			total:0,
			params: {
				page: 1,
				per_page: 10,
				status:''
			},
		}
	},
	onShow() {
		this.getOrderList()
	},
	methods: {
		getOrderList(){
			this.loadmoreStatus = 'loading';
			orderList(this.params).then(res => {
				this.total = res.data.total || 0;
				if (this.listData.length < res.data.total) {
					if (this.params.page == 1) {
						this.listData = res.data.data;
						this.params.page += 1;
					} else {
						this.listData = [...this.listData, ...res.data.data];
						this.params.page += 1;
					}
					if (res.data.data.length < this.params.per_page) {
						this.loadmoreStatus = 'nomore';
					} else {
						this.loadmoreStatus = 'loadmore';
					}
				} else {
					this.loadmoreStatus = 'nomore';
				}
				// -----------------------
				this.listData.forEach(item=> {
					if(item.closed == true){
						item.statusText = '已关闭'
					}else{
						if(item.paid_at == null){
							item.statusText = '待付款'
						}else{
							if(item.refund_status == 'applied'){
								item.statusText = '已申请退款'
							}else if(item.refund_status == 'processing'){
								item.statusText = '退款中'
							}else if(item.refund_status == 'success'){
								item.statusText = '退款成功'
							}else if(item.refund_status == 'failed'){
								item.statusText = '退款失败'
							}else if(item.refund_status == 'pending'){
								if(item.ship_status == 'pending'){
									item.statusText = '未发货'
								}else if(item.ship_status == 'delivered'){
									item.statusText = '已发货'
								}else if(item.ship_status == "received"){
									item.statusText = '已收货'
									// if(item.reviewed == false){
									// 	item.statusText = '待评价'
									// }else{
									// 	item.statusText = '已评价'
									// }
									
								}
							}
						}
					} 
				})
				
			})
		},
		scrolltolower() {
			this.getOrderList();
		},
		clickTab(e){
			this.listData = []
			this.params.page = 1
			if(e.index == 0){
				this.params.status = ''
			}else{
				this.params.status = Number(e.index) - 1
			}
			this.currentIndex=e.index
			this.getOrderList()
		},
		// 支付
		wxpay(id){
			wechatpay(id).then(r => {
				if(r.status == 200){
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: r.data.orderInfo.timeStamp,
						nonceStr: r.data.orderInfo.nonceStr,
						package: r.data.orderInfo.package,
						signType:r.data.orderInfo.signType,
						paySign: r.data.orderInfo.paySign,
						success: function (res) {
							// 处理支付成功的逻辑
						},
						fail: function (err) {
							console.error('支付失败:', err);
							// 处理支付失败的逻辑
						}
					});
				}
			})
		},
		goToInfo(val){
			uni.navigateTo({
				url:'../orderInfo/orderInfo?id=' + val
			})
		}
	},
	onLoad(option) {
		this.currentIndex = option.status
		if(option.status != '4'){
			this.params.status = Number(option.status) - 1
		}else{
			this.params.status = option.status
		}
	}
};
</script>

<style>

</style>
<style lang="scss" scoped>
.container {
	padding: 0 30rpx;
	font-size: 26rpx;
	font-style: 'Microsoft Yahei';
	.item {
		padding: 30rpx; 
		background-color: #fff;
		margin-top: 30rpx;
		border-radius: 10rpx;
		.top{
			display:flex;
			justify-content: space-between;
			
			.status{
				color: #1786f8;
			}
		}
		.center{
			display: flex;
			margin: 30rpx 0;
			.goods_img{
				margin-right: 30rpx;
				image{
					width: 140rpx;
					height: 140rpx;
				}
			}
			.goods_info{
				display: flex;
				justify-content: space-between;
				flex-direction: column;
				flex: 1;
				.price_num{
					display: flex;
					justify-content: space-between;
					.price{
						font-weight: bold;
						color: #1786f8;
					}
					.num{
						color:#777
					}
				}
			}
		}
		.down{
			display: flex;
			padding: 20rpx;
			justify-content: space-between;
			background: #fbfbfb;
			margin-bottom: 30rpx;
		}
		.bottom_btn{
			width: 180rpx;
			float: right;
		}
		.bottom_btn2{
			width: 100%;
			.closeorder{
				display: inline-block;
				width: 300rpx;
				height: 80rpx;
				font-size: 22rpx;
				color: #b5b6b9;
			}
			button{
				display: inline-block !important;
			}
			.close_order_btn{
				width: 130rpx;
				height: 20rpx;
				line-height: 20rpx;
				text-align: center;
				padding: 20rpx 10rpx;
				font-size: 26rpx;
				border: 1px solid #a5a5a5;
				border-radius: 30rpx;
				display: inline-block !important;
				margin-left: 30rpx;
			}
			.pay_order_btn{
				width: 100rpx;
				height: 20rpx;
				line-height: 20rpx;
				text-align: center;
				padding: 20rpx 10rpx;
				font-size: 26rpx;
				border: 1px solid #72b6fb;
				color: #1786f8;
				border-radius: 30rpx;
				display: inline-block !important;
				margin-left: 30rpx;
			}
		}
		
	}
}

</style>
